<template>
	<view class="page-box">
		<view v-for="(row, date) in englishWordListShow" :key="'englishWord' + date" class="every-date-learn">
			<view class="learn-date">{{date}}</view>
			<u-row gutter="16">
				<u-col span="6" v-for="item in row" :key="item.id" :class="item.answer">
					<text @click="setResult(item.id)" @longtap="handleDelete(item.id)">{{item.english}}</text>
				</u-col>
			</u-row>
			<!-- <view class="every-row">
				<view v-for="item in row" :key="item.id" class="every-english-word">
					<text @click="setResult(item.id)" :class="item.answer">{{item.english}}</text>
				</view>
			</view> -->
		</view>
		<!-- 选择科目 -->
		<u-select v-model="showResultSelect" :list="resultList" @confirm="handleSelectResult"></u-select>
		<!-- 正在加载 -->
		<Loading v-if="showLoading" :gifUrl="gifUrl"></Loading>
	</view>
</template>

<script>
	let me;
	import funcs from "@/static/js/func.js";
	import Loading from "@/components/common/isLoading.vue";
	export default {
		components: {
			Loading
		},
		data() {
			return {
				englishWordList: [],
				screenWidth: "325px",
				screenHeight: "625px",
				currPublicPath: process.env.NODE_ENV == "production" ? "/hanjy-learn" : "",
				currEnglishWordId: "",
				showResultSelect: false,
				resultList: [{
						label: "正确",
						value: "right"
					},
					{
						label: "错误",
						value: "wrong"
					},
				],
				// 正在加载
				showLoading: false,
				gifUrl: "",
			}
		},
		computed: {
			// 对拿到的汉字列表4个一组，分为二重数组
			englishWordListShow() {
				let list = {};
				this.englishWordList.forEach(item => {
					if (!list[item.date]) {
						list[item.date] = [{
							id: item.id,
							english: item.english,
							answer: item.answer || ""
						}];
					} else {
						list[item.date].push({
							id: item.id,
							english: item.english,
							answer: item.answer || ""
						});
					}
				})
				return list;
			}
		},
		onLoad() {
			me = this;
			me.queryEnglishWords(); // 查询我的码
			me.$nextTick(() => {
				me.screenWidth = window.innerWidth + "px";
				me.screenHeight = window.innerHeight - 48 + "px";
			})
		},
		methods: {
			/**
			 * 查询所有学过的汉字，按学习日期展示
			 */
			queryEnglishWords() {
				me.gifUrl = `isLoading`;
				me.showLoading = true;
				me.$api.requestTask("/englishLearn/queryAllEnglishWords", {

				}, res => {
					me.showLoading = false;
					if (res.code == "200") {
						me.englishWordList = res.data;
					} else {
						me.englishWordList = [];
					}
				}, err => {
					me.showLoading = false;
					me.englishWordList = [];
				});
			},
			/**
			 * 在这个页面可以自己挑选单词，家长在孩子拼读后设置正确或错误
			 * @param {Object} id
			 */
			setResult(id) {
				me.currEnglishWordId = id;
				me.showResultSelect = true;
			},
			/**
			 * 选择拼读的结果是正确还是错误
			 * @param {Object} e
			 */
			handleSelectResult(e) {
				if (e[0].value == 'right') {
					me.gifUrl = `isRight${parseInt(Math.random()*2 + 1)}`;
				} else {
					me.gifUrl = `isWrong`;
				}
				me.showLoading = true;
				if (e && e.length == 1) {
					me.$api.requestTask("/englishLearn/setAnswer", {
						id: me.currEnglishWordId,
						answer: e[0].value
					}, res => {
						me.showLoading = false;
						if (res.code == "200") {
							me.englishWordList.forEach(item => {
								if (item.id == me.currEnglishWordId) {
									me.$set(item, "answer", e[0].value);
								}
							})
						} else {
							funcs.showModalTips("操作失败，请重试~")
						}
					}, err => {
						me.showLoading = false;
						funcs.showModalTips("对不起，系统异常，请稍后重试~")
					});
				}
			},
			/**
			 * 长按删除
			 */
			handleDelete(id) {
				console.log("长按删除", id);
				uni.showModal({
					title: '温馨提示',
					content: '您确认删除这个单词吗？',
					success: function(res) {
						if (res.confirm) {
							me.gifUrl = "isLoading";
							me.showLoading = true;
							me.$api.requestTask("/englishLearn/deleteEnglishWord", {
								id
							}, res => {
								me.showLoading = false;
								if (res.code == "200") {
									funcs.showModalTips("删除成功")
									me.queryEnglishWords();
								} else {
									funcs.showModalTips(res.msg || "删除失败，请稍后再试")
								}
							}, err => {
								me.showLoading = false;
								funcs.showModalTips("对不起，系统异常，请稍后再试")
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-box {
		width: 100vw;
		height: 100vh;
		background-color: #eee;
		overflow-y: auto;
		padding: 24rpx;

		.every-date-learn {
			.learn-date {
				font-size: 1.4em;
				padding: 32rpx 16rpx 16rpx 16rpx;
			}

			&:first-child {
				.learn-date {
					padding-top: 0;
				}
			}

			.u-row {
				.u-col {
					padding: 0 16rpx !important;
					background-color: #fff;
					color: #000;
					text-align: center !important;
					margin-bottom: 16rpx;
					font-size: 1.6em;
					height: 2em;
					line-height: 2em;

					&:nth-child(2n+1) {
						border-right: 1px solid #ccc;
					}
				}

				.right {
					background-color: #27B727;
					color: #fff;
				}

				.wrong {
					background-color: #F03434;
					color: #fff;
				}
			}

			.every-row {
				display: flex;


				.every-english-word {
					flex: .5;
					text-align: center;

					text {
						display: inline-block;
						font-size: 1.6em;
						width: 100%;
						height: 2.4em;
						line-height: 2.4em;
						text-align: center;
						border: 1px solid #ccc;
						border-radius: 16rpx;
						background-color: #fff;
						color: #000;
					}

					.right {
						background-color: #27B727;
						color: #fff;
					}

					.wrong {
						background-color: #F03434;
						color: #fff;
					}
				}
			}
		}
	}
</style>